<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>处理类数组对象</title>
        <style type="text/css">
            .wrapper {
                border: 1px solid blue ;
            }

            .inner {
                background: #dfdfdf ;
                height: 50px ;
                margin: 10px ;
            }
        </style>
    </head>
    <body>

       <div class="wrapper">
           <div class="inner"></div>
           <div class="inner"></div>
           <div class="inner"></div>
       </div>
       <div class="wrapper">
           <div class="inner"></div>
           <div class="inner"></div>
           <div class="inner"></div>
       </div>
       <div class="wrapper">
           <div class="inner"></div>
           <div class="inner"></div>
           <div class="inner"></div>
       </div>
       <div class="wrapper">
           <div class="inner"></div>
           <div class="inner"></div>
           <div class="inner"></div>
       </div>
       <div class="wrapper">
           <div class="inner"></div>
           <div class="inner"></div>
           <div class="inner"></div>
       </div>
        
       <script type="text/javascript">
          // 根据指定的选择器，返回匹配于该选择器的所有元素组成的"集合"
          let wrappers = document.querySelectorAll( '.wrapper' ); // 通过document提供的函数来获取元素
          // 务必注意 wrappers 并不是数组对象，而是NodeList类的一个实例
          console.log( Array.isArray(wrappers) ); // false
          console.log( wrappers.length );
          console.log( wrappers );
          // 将类数组对象转化为数组对象
          let arr = Array.from( wrappers );
          arr.forEach( e => e.style.margin = '15px auto' );
       </script>

    </body>
</html>